<template>
  <div>
    <div class="app-container dealerdetail_container">
      <div class="page_header gongyuan_header">工单详情</div>
      <el-tabs v-model="tabTypeInfo" type="card">
        <el-tab-pane label="用户预约信息" name="userInfo"></el-tab-pane>
        <el-tab-pane label="测量信息" name="testInfo"></el-tab-pane>
        <el-tab-pane label="施工信息" name="shigongInfo"></el-tab-pane>
        <el-tab-pane label="闭水试验" name="bishuiInfo"></el-tab-pane>
        <el-tab-pane label="检测信息" name="jianceInfo"></el-tab-pane>
        <el-tab-pane label="监管信息" name="jianguanInfo"></el-tab-pane>
      </el-tabs>
      <div class="detail_page" v-show="tabTypeInfo === 'userInfo'">

        <div class="row">
          <div class="detail_label gongyuan_content">工单进度:</div>
          <div class="detail_value gongyuan_content_value">{{statusFormatter(formData.status)}}</div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">付款方式:</div>
          <div class="detail_value gongyuan_content_value">{{formData.paymentType==''||formData.paymentType==undefined?'未确定':formData.paymentType}}</div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">经销商:</div>
          <div class="detail_value gongyuan_content_value">{{formData.orderDetail.dealerName}}</div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content" style="line-height: 35px;">服务人员:</div>
          <el-select v-if="formData.status==1" v-model="formData.orderDetail.serviceUserId" filterable  placeholder="请选择服务人员" clearable :style="{width: '30%'}">
            <el-option v-for="(item, index) in presonalList" :key="index" :label="item.sysUser.nickName" :value="item.servicePersonalId"></el-option>
          </el-select>

          <div v-if="formData.status!=1" class="detail_value gongyuan_content_value" style="line-height: 35px">{{formData.orderDetail.serviceUserName}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">中介人:</div>
          <div class="detail_value gongyuan_content_value">{{formData.agent==undefined?'无':formData.agent.userName}}</div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">提成比例:</div>
          <div class="detail_value gongyuan_content_value">{{formData.agent==undefined?'无':formData.agent.rate+'%'}}</div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">联系人:</div>
          <div class="detail_value gongyuan_content_value">{{formData.userName}}</div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">联系方式:</div>
          <div class="detail_value gongyuan_content_value">{{formData.phoneNumber}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">地区:</div>
          <div class="detail_value gongyuan_content_value">{{formData.userProvince}}/{{formData.userCity}}/{{formData.userArea}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">详细地址:</div>
          <div class="detail_value gongyuan_content_value">{{formData.address}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">预约时间:</div>
          <div class="detail_value gongyuan_content_value">{{formData.orderDate}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">预约备注:</div>
          <div class="detail_value gongyuan_content_value">{{formData.orderRemark}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">定金支付状态:</div>
          <div class="detail_value gongyuan_content_value">{{formData.paymentStatus}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">定金支付金额:</div>
          <div class="detail_value gongyuan_content_value">{{formData.amount}}</div>
        </div>

        <div class="row" v-if="formData.status==1">
          <el-button type="primary" :disabled="pending" @click="submitForm">确认订单</el-button>
        </div>

      </div>

      <div class="detail_page" v-show="tabTypeInfo === 'testInfo'">
        <el-tabs v-model="activeName" style="width: 50%">
          <el-tab-pane label="防水" name="first">
            <div v-for="(item, index) in formData.measure.waterproofJson.datalist">
              <div class="row">
                <div class="detail_label gongyuan_content" style="text-align: left;width: 70px">面积位置:</div>
                <div class="detail_value gongyuan_content_value" style="width: 30%">{{item.optName}}</div>
                <div class="detail_label gongyuan_content" style="text-align: left;width: 150px">{{item.optName}}总面积:</div>
                <div class="detail_value gongyuan_content_value">{{item.czarea}}㎡</div>
              </div>
              <el-table
                :data="item.child"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="位置"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="height"
                  label="长度"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="width"
                  label="宽度">
                </el-table-column>
                <el-table-column
                  prop="area"
                  label="面积">
                </el-table-column>
              </el-table>
            </div>
            <div class="row">
              <div class="detail_label gongyuan_content" style="text-align: left;width: 100px">方案:</div>
              <div class="detail_value gongyuan_content_value" style="width: 30%">{{formData.measure.waterproofJson.schemea.schemeName}}</div>
              <div class="detail_label gongyuan_content" style="text-align: left;width: 100px">方案售价:</div>
              <div class="detail_value gongyuan_content_value">{{formData.measure.waterproofJson.schemea.schemePrice}}元</div>
            </div>
            <div class="row">
              <div class="detail_label gongyuan_content" style="text-align: left;width: 100px">防水总面积:</div>
              <div class="detail_value gongyuan_content_value" style="width: 30%">{{formData.measure.waterproofJson.zarea}}㎡</div>
              <div class="detail_label gongyuan_content" style="text-align: left;width: 100px">防水总价:</div>
              <div class="detail_value gongyuan_content_value">{{formData.measure.waterproofJson.zprice}}元</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="给排水" name="second">
            <div v-for="(item, index) in formData.measure.drainageJson.datalist">
              <div class="row">
                <div class="detail_label gongyuan_content" style="text-align: left;width: 70px">面积位置:</div>
                <div class="detail_value gongyuan_content_value" style="width: 30%">{{item.optName}}</div>
                <div class="detail_label gongyuan_content" style="text-align: left;width: 200px">{{item.optName}}总面积:</div>
                <div class="detail_value gongyuan_content_value">{{item.czarea}}㎡</div>
              </div>
              <el-table
                :data="item.child"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="位置"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="height"
                  label="长度"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="width"
                  label="宽度">
                </el-table-column>
                <el-table-column
                  prop="area"
                  label="面积">
                </el-table-column>
              </el-table>
            </div>
            <div class="row">
              <div class="detail_label gongyuan_content" style="text-align: left;width: 150px">方案:</div>
              <div class="detail_value gongyuan_content_value" style="width: 30%">{{formData.measure.drainageJson.schemea.schemeName}}</div>
              <div class="detail_label gongyuan_content" style="text-align: left;width: 100px">方案售价:</div>
              <div class="detail_value gongyuan_content_value">{{formData.measure.drainageJson.schemea.schemePrice}}元</div>
            </div>
            <div class="row">
              <div class="detail_label gongyuan_content" style="text-align: left;width: 150px">给排水总面积:</div>
              <div class="detail_value gongyuan_content_value" style="width: 30%">{{formData.measure.drainageJson.zarea}}㎡</div>
              <div class="detail_label gongyuan_content" style="text-align: left;width: 100px">给排水总价:</div>
              <div class="detail_value gongyuan_content_value">{{formData.measure.drainageJson.zprice}}元</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="电工" name="third">
            <div v-for="(item, index) in formData.measure.electricianJson.datalist">
              <div class="row">
                <div class="detail_label gongyuan_content" style="text-align: left;width: 70px">面积位置:</div>
                <div class="detail_value gongyuan_content_value" style="width: 30%">{{item.optName}}</div>
                <div class="detail_label gongyuan_content" style="text-align: left;width: 150px">{{item.optName}}总面积:</div>
                <div class="detail_value gongyuan_content_value">{{item.czarea}}㎡</div>
              </div>
              <el-table
                :data="item.child"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="位置"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="height"
                  label="长度"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="width"
                  label="宽度">
                </el-table-column>
                <el-table-column
                  prop="area"
                  label="面积">
                </el-table-column>
              </el-table>
            </div>
            <div class="row">
              <div class="detail_label gongyuan_content" style="text-align: left;width: 150px">方案:</div>
              <div class="detail_value gongyuan_content_value" style="width: 30%">{{formData.measure.electricianJson.schemea.schemeName}}</div>
              <div class="detail_label gongyuan_content" style="text-align: left;width: 100px">方案售价:</div>
              <div class="detail_value gongyuan_content_value">{{formData.measure.electricianJson.schemea.schemePrice}}元</div>
            </div>
            <div class="row">
              <div class="detail_label gongyuan_content" style="text-align: left;width: 150px">给排水总面积:</div>
              <div class="detail_value gongyuan_content_value" style="width: 30%">{{formData.measure.electricianJson.zarea}}㎡</div>
              <div class="detail_label gongyuan_content" style="text-align: left;width: 100px">给排水总价:</div>
              <div class="detail_value gongyuan_content_value">{{formData.measure.electricianJson.zprice}}元</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="其他" name="fourth">
            <div v-for="(item, index) in formData.measure.otherJson.datalist">
              <div class="row">
                <div class="detail_label gongyuan_content" style="text-align: left;width: 70px">面积位置:</div>
                <div class="detail_value gongyuan_content_value" style="width: 30%">{{item.optName}}</div>
                <div class="detail_label gongyuan_content" style="text-align: left;width: 150px">{{item.optName}}总面积:</div>
                <div class="detail_value gongyuan_content_value">{{item.czarea}}㎡</div>
              </div>
              <el-table
                :data="item.child"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="位置"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="height"
                  label="长度"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="width"
                  label="宽度">
                </el-table-column>
                <el-table-column
                  prop="area"
                  label="面积">
                </el-table-column>
              </el-table>
            </div>

            <div class="row" v-for="(item,index) in formData.measure.otherJson.schemeList">
              <div class="detail_label gongyuan_content" style="text-align: left;width: 150px">方案:</div>
              <div class="detail_value gongyuan_content_value" style="width: 30%">{{item.schemea.schemeName}}</div>
              <div class="detail_label gongyuan_content" style="text-align: left;width: 100px">方案售价:</div>
              <div class="detail_value gongyuan_content_value">{{item.schemea.schemePrice}}元</div>
            </div>
            <div class="row">
              <div class="detail_label gongyuan_content" style="text-align: left;width: 150px">给排水总面积:</div>
              <div class="detail_value gongyuan_content_value" style="width: 30%">{{formData.measure.otherJson.zarea}}㎡</div>
              <div class="detail_label gongyuan_content" style="text-align: left;width: 100px">给排水总价:</div>
              <div class="detail_value gongyuan_content_value">{{formData.measure.otherJson.zprice}}元</div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="row">
          <div class="detail_label gongyuan_content" style="text-align: left;width: 150px">订单总费用:</div>
          <div class="detail_value gongyuan_content_value">{{formData.measure.allAmount}}元</div>
        </div>
        <div class="row" style="width: 51%;">
          <el-table
            :data="formData.measure.periodList"
            style="width: 100%">
            <el-table-column
              prop="payName"
              label="期数"
              width="180">
            </el-table-column>
            <el-table-column
              prop="payRate"
              label="货款比例(%)"
              width="180">
            </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="金额(元)">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button v-if="scope.row.paymentStatus=='未支付'" @click="addPayment(scope.row)"  size="mini" type="text" >待支付</el-button>
                <el-button v-if="scope.row.paymentStatus=='已支付'"  size="mini" type="text" >已支付</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="detail_page" v-show="tabTypeInfo === 'shigongInfo'">
        <div class="row">
          <div class="detail_label gongyuan_content">施工前图片:</div>
          <div class="detail_value gongyuan_content_value" style=" display: flex;">
            <div v-for="(item,index) in formData.construction.frontJson" style="margin-left: 10px;">
              <el-image
                style="width: 200px; height: 200px"
                :src="item.url"
                :preview-src-list="srcList"
                >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">施工中图片:</div>
          <div class="detail_value gongyuan_content_value" style=" display: flex;">
            <div v-for="(item,index) in formData.construction.middleJson" style="margin-left: 10px;">
              <el-image
                style="width: 200px; height: 200px"
                :src="item.url"
                :preview-src-list="srcList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">施工后图片:</div>
          <div class="detail_value gongyuan_content_value" style=" display: flex;">
            <div v-for="(item,index) in formData.construction.backJson" style="margin-left: 10px;">
              <el-image
                style="width: 200px; height: 200px"
                :src="item.url"
                :preview-src-list="srcList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">施工前图片:</div>
          <div class="detail_value gongyuan_content_value">
            <el-radio-group v-model="formData.construction.alarmType" :disabled="true">
              <el-radio :label="true">已完成防漏处理并贴好警示标示</el-radio>
              <el-radio :label="false">未完成并未贴警示贴</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">警告标示图片:</div>
          <div class="detail_value gongyuan_content_value" style=" display: flex;">
            <div v-for="(item,index) in formData.construction.alarmJson" style="margin-left: 10px;">
              <el-image
                style="width: 200px; height: 200px"
                :src="item.url"
                :preview-src-list="srcList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>

      </div>

      <div class="detail_page" v-show="tabTypeInfo === 'bishuiInfo'">
        <div class="row">
          <div class="detail_label gongyuan_content">试验结果:</div>
          <div class="detail_value gongyuan_content_value" style=" display: flex;">
            <div v-for="(item,index) in formData.closeWater.resultJson" style="margin-left: 10px;">
              <el-image
                style="width: 200px; height: 200px"
                :src="item.url"
                :preview-src-list="srcCloseWaterList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">试验确认:</div>
          <div class="detail_value gongyuan_content_value">
            <el-radio-group v-model="formData.closeWater.alarmType" :disabled="true">
              <el-radio :label="true">已完成防漏处理并贴好警示标示</el-radio>
              <el-radio :label="false">未完成并未贴警示贴</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">警告标示图片:</div>
          <div class="detail_value gongyuan_content_value" style=" display: flex;">
            <div v-for="(item,index) in formData.closeWater.alarmJson" style="margin-left: 10px;">
              <el-image
                style="width: 200px; height: 200px"
                :src="item.url"
                :preview-src-list="srcCloseWaterList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>


        <div class="row">
          <div class="detail_label gongyuan_content">施工确认:</div>
          <div class="detail_value gongyuan_content_value">
            <el-radio-group v-model="formData.closeWater.closeWaterType">
              <el-radio :label="'1'">未被破坏</el-radio>
              <el-radio :label="'2'">被破坏，影响不大</el-radio>
              <el-radio :label="'3'">被破坏，额外费用</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="row" v-if="formData.closeWater.closeWaterType=='3'">
          <div class="detail_label gongyuan_content">额外费用:</div>
          <div class="detail_value gongyuan_content_value">
           {{formData.closeWater.amount}}元
          </div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">破坏图片:</div>
          <div class="detail_value gongyuan_content_value" style=" display: flex;">
            <div v-for="(item,index) in formData.closeWater.destructionJson" style="margin-left: 10px;">
              <el-image
                style="width: 200px; height: 200px"
                :src="item.url"
                :preview-src-list="srcCloseWaterList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>
        <div class="row" v-if="formData.closeWater.closeWaterType=='3'">
          <div class="detail_label gongyuan_content">备注信息:</div>
          <div class="detail_value gongyuan_content_value">
            {{formData.closeWater.remark}}
          </div>
        </div>
      </div>

      <div class="detail_page" v-show="tabTypeInfo === 'jianceInfo'">
        <div class="row">
          <div class="detail_label gongyuan_content">检测过程:</div>
          <div class="detail_value gongyuan_content_value" style=" display: flex;">
            <div v-for="(item,index) in formData.test.testingJson" style="margin-left: 10px;">
              <el-image
                style="width: 200px; height: 200px"
                :src="item.url"
                :preview-src-list="srcTestList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">检测确认:</div>
            <div class="detail_value gongyuan_content_value">
              <el-radio-group v-model="formData.test.destructionType" :disabled="true">
                <el-radio :label="1">未被破坏</el-radio>
                <el-radio :label="2">被破坏，影响不大</el-radio>
                <el-radio :label="3">被破坏，额外费用</el-radio>
              </el-radio-group>
            </div>
        </div>
        <div class="row" v-if="formData.test.destructionType=='3'">
          <div class="detail_label gongyuan_content">额外费用:</div>
          <div class="detail_value gongyuan_content_value">
           {{formData.test.amount}}元
          </div>
        </div>

        <div class="row" v-if="formData.test.destructionType=='3'||formData.test.destructionType=='2'">
          <div class="detail_label gongyuan_content">破坏图片:</div>
          <div class="detail_value gongyuan_content_value" style=" display: flex;">
            <div v-for="(item,index) in formData.test.testDestructionJson" style="margin-left: 10px;">
              <el-image
                style="width: 200px; height: 200px"
                :src="item.url"
                :preview-src-list="srcTestList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">服务质量:</div>
          <div class="detail_value gongyuan_content_value">
            <el-radio-group v-model="formData.test.serviceQa">
              <el-radio :label="1">非常满意</el-radio>
              <el-radio :label="2">满意</el-radio>
              <el-radio :label="3">一般</el-radio>
              <el-radio :label="4">不满意</el-radio>
              <el-radio :label="5">恶劣</el-radio>
            </el-radio-group>
          </div>
        </div>


        <div class="row">
          <div class="detail_label gongyuan_content">施工质量:</div>
          <div class="detail_value gongyuan_content_value">
            <el-radio-group v-model="formData.test.constructionQa">
              <el-radio :label="1">非常满意</el-radio>
              <el-radio :label="2">满意</el-radio>
              <el-radio :label="3">一般</el-radio>
              <el-radio :label="4">不满意</el-radio>
              <el-radio :label="5">恶劣</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">房主签字:</div>
          <div class="detail_value gongyuan_content_value" style=" display: flex;">
            <div v-for="(item,index) in formData.test.autograph" style="margin-left: 10px;">
              <el-image
                style="width: 200px; height: 200px"
                :src="item.url"
                :preview-src-list="srcTestList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="detail_label gongyuan_content">备注信息:</div>
          <div class="detail_value gongyuan_content_value">
            {{formData.test.remark}}
          </div>
        </div>


      </div>

      <div class="detail_page" v-show="tabTypeInfo === 'jianguanInfo'">

      </div>
    </div>
  </div>
</template>

<script>
  import { getOrderById,updateOrderStatus } from '@/api/order/order'
  import { createCURD } from '@/api/sys'
  import {addDealer, updateDealer} from "@/api/dealer";
  const fetchApi = createCURD('personal')
  export default {
    name: 'Orderdetail',
    components: {},
    data() {
      return {
        activeName:'first',
        tabTypeInfo: 'userInfo',
        formData: {
          agent:{
            userName:'',
            rate:''
          },
          userName:'',
          phoneNumber:'',
          userArea:'',
          userCity:'',
          userProvince:'',
          address:'',
          orderDate:'',
          paymentStatus:'',
          amount:'',
          orderDetail:{
            dealerName:'',
            serviceUserName:'',
            serviceUserId:'',
            id:''
          },
          measure:{
            periodList:[],
            waterproofJson:{
              datalist:[],
              schemea:{
                schemeaName:''
              }
            },
            drainageJson:{
              datalist:[],
              schemea:{
                schemeaName:''
              }
            },
            electricianJson:{
              datalist:[],
              schemea:{
                schemeaName:''
              }
            },
            otherJson:{
              datalist:[],
              schemeList:[{
                schemea:{
                  schemeaName:''
                }
              }]
            },
          },
          status:'',
          paymentType:'',
          orderId:'',
          construction:{
            alarmJson:[],
            backJson:[],
            frontJson:[],
            middleJson:[],
            alarmType:true
          },
          closeWater:{
            alarmJson:[],
            destructionJson:[],
            resultJson:[]
          },
          test:{
            testingJson:[],
            testDestructionJson:[],
            autograph:[]
          }

        },
        loading:true,
        presonalList:[],
        pending:false,
        orderStatus:[],
        srcList:[],
        srcCloseWaterList:[],
        srcTestList:[]
      }
    },
    computed: {
      ID() {
        return this.$route.query.id
      }
    },
    async created() {
      this.getPersonalList();
      this.initDictsOptions('order_status', 'orderStatus')
    },
    async mounted() {
      if (this.ID){
         this.getOrderById();
      }
    },
    methods: {
      async initDictsOptions(dicts, listProps) {
        try {
          const res = await this.getDicts(dicts)
          if (res.code === 200) {
            this[listProps] = res.data.map((per) => ({
              label: per.dictLabel,
              value: per.dictValue
            }))
          }
        } catch (error) {
          console.log(error)
        }
      },
      statusFormatter(row){
        const obj = this.orderStatus.find((item) => item.value === row) || { label: '' }
        return obj.label
      },
      async getPersonalList() {
        this.loading = true
        const res = await fetchApi.list({pageNum:1,pageSize:1000})
        this.presonalList = res.rows
        this.loading = false
      },
      async getOrderById(){
        const res = await getOrderById(this.ID)
        this.formData=res.data;
        //防水
        if(this.formData.measure.waterproofJson==undefined){
          this.formData.measure.waterproofJson={datalist:[{optName:"",child:[{name:"",width:0,height:0,area:0}],czarea:0}],zarea:0,schemeaId:undefined,schemeaPrice:0,zprice:0,
            schemea:{
            schemeaName:''
          }}
        }else{
          this.formData.measure.waterproofJson=JSON.parse(this.formData.measure.waterproofJson);
        }
        //给排水
        if(this.formData.measure.drainageJson==undefined){
          this.formData.measure.drainageJson={datalist:[{optName:"",child:[{name:"",width:0,height:0,area:0}],czarea:0}],zarea:0,schemeaId:undefined,schemeaPrice:0,zprice:0,
            schemea:{
              schemeaName:''
            }}
        }else{
          this.formData.measure.drainageJson=JSON.parse(this.formData.measure.drainageJson);
        }
        //电工
        if(this.formData.measure.electricianJson==undefined){
          this.formData.measure.electricianJson={datalist:[{optName:"",child:[{name:"",width:0,height:0,area:0}],czarea:0}],zarea:0,schemeaId:undefined,schemeaPrice:0,zprice:0,
            schemea:{
              schemeaName:''
            }}
        }else{
          this.formData.measure.electricianJson=JSON.parse(this.formData.measure.electricianJson);
        }
        //其他
        if(this.formData.measure.otherJson==undefined){
          this.formData.measure.otherJson={datalist:[{optName:"",child:[{name:"",width:0,height:0,area:0}],czarea:0}],zarea:0,zprice:0,schemeList:[{
              schemea:{
                schemeaName:''
              }
            }]}
        }else{
          this.formData.measure.otherJson=JSON.parse(this.formData.measure.otherJson);
        }
        const $this=this;
        if(this.formData.construction){
            if(this.formData.construction.alarmJson){
              this.formData.construction.alarmJson=JSON.parse(this.formData.construction.alarmJson);
              this.formData.construction.alarmJson.forEach(function (item,index) {
                $this.srcList.push(item.url);
              })
            }else{
              this.formData.construction.alarmJson=[];
            }
          if(this.formData.construction.backJson){
            this.formData.construction.backJson=JSON.parse(this.formData.construction.backJson);
            this.formData.construction.backJson.forEach(function (item,index) {
              $this.srcList.push(item.url);
            })
          }else{
            this.formData.construction.backJson=[];
          }
          if(this.formData.construction.frontJson){
            this.formData.construction.frontJson=JSON.parse(this.formData.construction.frontJson);
            this.formData.construction.frontJson.forEach(function (item,index) {
              $this.srcList.push(item.url);
            })
          }else{
            this.formData.construction.frontJson=[];
          }
          if(this.formData.construction.middleJson){
            this.formData.construction.middleJson=JSON.parse(this.formData.construction.middleJson);
            this.formData.construction.middleJson.forEach(function (item,index) {
              $this.srcList.push(item.url);
            })
          }else{
            this.formData.construction.middleJson=[];
          }

        }

        if(this.formData.closeWater){
          if(this.formData.closeWater.alarmJson){
            this.formData.closeWater.alarmJson=JSON.parse(this.formData.closeWater.alarmJson);
            this.formData.closeWater.alarmJson.forEach(function (item,index) {
              $this.srcCloseWaterList.push(item.url);
            })
          }else{
            this.formData.closeWater.alarmJson=[];
          }
          if(this.formData.closeWater.destructionJson){
            this.formData.closeWater.destructionJson=JSON.parse(this.formData.closeWater.destructionJson);
            this.formData.closeWater.destructionJson.forEach(function (item,index) {
              $this.srcCloseWaterList.push(item.url);
            })
          }else{
            this.formData.closeWater.destructionJson=[];
          }
          if(this.formData.closeWater.resultJson){
            this.formData.closeWater.resultJson=JSON.parse(this.formData.closeWater.resultJson);
            this.formData.closeWater.resultJson.forEach(function (item,index) {
              $this.srcCloseWaterList.push(item.url);
            })
          }else{
            this.formData.closeWater.resultJson=[];
          }
        }


        if(this.formData.test){
          if(this.formData.test.testingJson){
            this.formData.test.testingJson=JSON.parse(this.formData.test.testingJson);
            this.formData.test.testingJson.forEach(function (item,index) {
              $this.srcTestList.push(item.url);
            })
          }else{
            this.formData.test.testingJson=[];
          }
          if(this.formData.test.testDestructionJson){
            this.formData.test.testDestructionJson=JSON.parse(this.formData.test.testDestructionJson);
            this.formData.test.testDestructionJson.forEach(function (item,index) {
              $this.srcTestList.push(item.url);
            })
          }else{
            this.formData.test.testDestructionJson=[];
          }
          if(this.formData.test.autograph){
            this.formData.test.autograph=JSON.parse(this.formData.test.autograph);
            this.formData.test.autograph.forEach(function (item,index) {
              $this.srcTestList.push(item.url);
            })
          }else{
            this.formData.test.autograph=[];
          }
        }

        this.formData.measure.periodList.forEach(function (item,index) {
              if(item.type=='定金'){
                $this.formData.paymentStatus=item.paymentStatus;
                $this.formData.amount=item.paymentAmount;
              }
        })
      },
      async submitForm() {
        try {
        this.pending = true
        const res = await updateOrderStatus({orderId:this.formData.orderId,id:this.formData.orderDetail.id,serviceUserId:this.formData.orderDetail.serviceUserId});
        if (res.code === 200) {
          this.msgSuccess(res.msg)
          this.getOrderById();
        }
        } catch (error) {
          console.log(error)
        }
        this.pending = false
      }
    }
  }
</script>

<style lang='scss'>
  .dealerdetail_container {
    .detail_page {
      .detail_label {
        width: 150px;
      }
    }
  }
</style>




